<template>
  <div class="myDiv">
    <div class="header">
      <UserAcatar @transfer="change" />
    </div>

    <div class="first">
      <el-button class="quitbtn" @click="quitBtn">
        <i class="el-icon-guide"></i>
        返回
      </el-button>
      <span class="font">作业详情</span>
      <div class="content">此处为作业详情</div>
    </div>
    <div class="second">
      <span class="font">请写下您的答案：</span>
      <!-- <div class="type">
        功能选择
        <i class="el-icon-picture-outline" title="上传图片"></i>
        <i class="el-icon-folder-add" title="上传文件夹"></i>
        <i class="el-icon-document" title="上传文本"></i>
        <i class="el-icon-picture-outline" title="上传图片"></i>
        <i class="el-icon-picture-outline" title="上传图片"></i>
      </div> -->

      <QuillEditor class="getcontent" v-bind:choice="choice" />

    </div>
  </div>
</template>

<script>
import UserAcatar from "@/components/UserAcatar.vue"; //引入组件
import QuillEditor from "@/components/submitjob/TextEditing.vue";
export default {
  name: "ModifyWork",
  components: {
    UserAcatar,
    QuillEditor
  },
  data() {
    return {
      choice: "修改作业"
    };
  },
  methods: {
    // 将头像组件中的路由再传递给homeview
    change(msg) {
      this.$emit("transfer", msg);
    },
    quitBtn() {
      this.$router.go(-1)
    },
  },
  mounted() { },
};
</script>
<style scoped>
.second {
  display: flex;
  margin-top: 25px;
  flex-direction: column;
}

.quitbtn {
  margin-top: 10px;
  width: 80px;
  height: 40px;
  border-radius: 35%;
  margin-left: 50px;
  background: linear-gradient(360deg,
      rgba(248, 249, 253, 0.8),
      rgba(7, 180, 123, 0.8),
      rgba(6, 216, 24, 0),
      rgba(69, 224, 7, 0));
}

.font {
  margin-left: 50px;
  font-family: "思源黑体";
  font-weight: bolder;
}

.myDiv {
  display: flex;
  flex-direction: column;
}

.first {
  display: flex;
  flex-direction: column;
}

.content {
  width: 1000px;
  height: 150px;
  margin-top: 20px;
  margin-left: 50px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.header {
  width: 100%;
  height: 80px;
  border-bottom: 2px solid #bbb;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.getcontent {
  margin-top: 10px;
  margin-left: 50px;
  width: 1000px;
}
</style>